<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-stars"></div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <h1 class="login-title">登录</h1>

      <el-form ref="form" :model="form" label-width="0" class="login-form">
        <el-form-item>
          <el-input
              v-model="form.username"
              placeholder="用户名/账号/手机号"
              prefix-icon="User"
              class="login-input"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-input
              v-model="form.password"
              placeholder="请输入您的密码"
              show-password
              prefix-icon="Lock"
              class="login-input"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="onLogin"
              class="login-button"
          >
            登录
          </el-button>
        </el-form-item>

        <div class="link-group">
          <router-link to="/register" class="link">注册账号</router-link>
          <router-link to="/forgot-password" class="link">忘记密码?</router-link>
        </div>

        <!-- 第三方登录 -->
        <div class="third-party-login">
          <div class="divider">其他登录方式</div>
          <div class="social-buttons">
            <button class="social-btn wechat">
              <i class="icon-wechat"></i>
            </button>
            <button class="social-btn qq">
              <i class="icon-qq"></i>
            </button>
            <button class="social-btn weibo">
              <i class="icon-weibo"></i>
            </button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入api
import {login} from '@/api/user'
export default {
  name: "LoginView",
  data() {
    return {
      form: {
        username: '大聪明',
        password: '123456',
      }
    }
  },
  methods: {
    onLogin() {
      console.log('发送登录前信息', this.form)
      login(this.form)
          .then(res => {
            if (res.code !== 200) {
              this.$message.error('用户号或密码错误');
            } else {
              this.$message.success('登录成功');
              this.$store.commit('saveUserInfo', res.data)
              this.$store.commit('saveToken', res.data)
              this.$router.push('/admin')
            }
          })
          .catch(error => {
            console.error('登录请求失败:', error)
            if (error.code === 'ERR_NETWORK') {
              this.$message.error('网络连接失败，请检查网络或联系管理员')
            } else if (error.response) {
              this.$message.error(`服务器响应错误: ${error.response.status}`)
            } else {
              this.$message.error('未知错误')
            }
          })
    }
  }
}
</script>

<style scoped>
/* 关键修改：移除默认边距，确保页面占满全屏 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden; /* 防止页面整体滚动 */
}

.login-container {
  min-height: 100vh;
  height: 100%; /* 确保占满整个视口高度 */
  background: linear-gradient(135deg, #4a8fe7 0%, #1a5fc9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden; /* 防止内部内容溢出产生滚动条 */
}

/* 背景星星效果 */
.background-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
      radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
      radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
      radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
      radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
      radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0, 0, 0, 0)),
      radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.3;
  animation: stars-move 20s linear infinite;
}

@keyframes stars-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 200px;
  }
}

/* 登录卡片样式 */
.login-card {
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 40px 30px;
  position: relative;
  z-index: 1;
}

.login-title {
  text-align: center;
  color: #1a5fc9;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

.login-form {
  width: 100%;
}

.login-input {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border-color: #e5e7eb;
  font-size: 14px;
  transition: all 0.3s ease;
}

.login-input:focus {
  border-color: #4a8fe7;
  box-shadow: 0 0 0 2px rgba(74, 143, 231, 0.2);
}

.login-button {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background-color: #1a5fc9;
  border-color: #1a5fc9;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  transition: all 0.3s ease;
}

.login-button:hover {
  background-color: #0f4cad;
  border-color: #0f4cad;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 95, 201, 0.3);
}

/* 链接样式 */
.link-group {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 30px;
}

.link {
  color: #4a8fe7;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.link:hover {
  color: #1a5fc9;
  text-decoration: underline;
}

/* 第三方登录样式 */
.third-party-login {
  margin-top: 30px;
}

.divider {
  position: relative;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 20px;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: #e5e7eb;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wechat {
  background-color: #07c160;
  color: white;
}

.qq {
  background-color: #12b7f5;
  color: white;
}

.weibo {
  background-color: #ff3737;
  color: white;
}

.icon-wechat::before {
  content: "微信";
  font-size: 16px;
}

.icon-qq::before {
  content: "QQ";
  font-size: 16px;
}

.icon-weibo::before {
  content: "微博";
  font-size: 16px;
}
</style>
